{% block sw_custom_field_type_base_content %}
{% parent() %}

{% block sw_custom_field_type_select_multi %}

<mt-switch
    v-model="multiSelectSwitch"
    class="sw-custom-field-detail__switch"
    :disabled="multiSelectSwitchDisabled || undefined"
    :label="$tc('sw-settings-custom-field.customField.detail.labelMultiSelect')"
    @update:value="onChangeMultiSelectSwitch"
/>
{% endblock %}

{% block sw_custom_field_type_select_options %}
<div
    v-for="(option, index) in currentCustomField.config.options"
    :key="index"
>
    {% block sw_custom_field_type_select_options_label %}
    <span>
        {{ $tc('sw-settings-custom-field.customField.detail.labelOption', { count: (index+1) }, 0) }}
    </span>
    {% endblock %}

    {% block sw_custom_field_type_select_options_delete %}
    <mt-button
        class="sw-custom-field-type-select__delete-option-button"
        size="small"
        variant="secondary"
        @click="onDeleteOption(index)"
    >
        {{ $tc('sw-settings-custom-field.customField.detail.labelDeleteOption') }}
    </mt-button>
    {% endblock %}

    {% block sw_custom_field_type_select_options_container %}
    <sw-container
        class="sw-custom-field-type-select__option-container"
        columns="1fr 1fr"
        gap="20px"
    >
        {% block sw_custom_field_type_select_options_container_technical_name %}

        <mt-text-field
            v-model="option.value"
            :label="$tc('sw-settings-custom-field.customField.detail.labelTechnicalName')"
        />
        {% endblock %}

        {% block sw_custom_field_type_select_options_container_labels %}
        <div>

            <mt-text-field
                v-for="locale in locales"
                :key="locale"
                v-model="option.label[locale]"
                class="sw-custom-field-type-select__option-label"
                :label="getLabel(locale)"
            />
        </div>
        {% endblock %}
    </sw-container>
    {% endblock %}
</div>
{% endblock %}

{% block sw_custom_field_type_select_add_option %}
<mt-button
    v-if="isOptionAddable"
    size="small"
    class="sw-custom-field-type-select__button-add"
    variant="secondary"
    @click="onClickAddOption"
>
    {{ $tc('sw-settings-custom-field.customField.detail.buttonAddOption') }}
</mt-button>
    {% endblock %}
{% endblock %}
